<template>
	<el-main style="padding: 0 20px" v-loading="loading">
		<el-row :gutter="10" v-if="state.list.length > 0">
			<template v-for="item in state.list" :key="item">
				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3" >
					<goodsItem :item="item.goods" @onTap="addGoods(item)" @details="toDetails(item)"/>
				</el-col>
			</template>
		</el-row>
		<sa-empty v-else/>
	</el-main>
	<el-footer class="goods-index-footer ">
		<sa-view-bar>
			<template #right>
				<sa-pagination :pageData="state.pageData"  :pagesize="[24,48,96]" @updateFn="getData" />

			</template>
		</sa-view-bar>
	</el-footer>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { useModal, usePagination } from '@/sheep/hooks';
import goodsItem from './goods-item.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {api } from "../recommend.service"
import details from '../details.vue';
import $store from '@/sheep/store';
const emit = defineEmits(['modalCallBack']);
const loading = ref(true);

const state = reactive({
	list: [

	],
	pageData: {
		page: 1,
		list_rows: 24,
		total: 0,
	},
})

onMounted(()=>{
	getData()
})

async function  addGoods(item){
	const { store_id } =$store('account').info;
	// if(!organ_id && organ_id != 0){
	// 	ElMessage({
	// 		type: 'warning',
	// 		message: '账号下没有绑定店铺',
	// 	});
	// 	return;
	// }
	loading.value = true;

	let { data , error} = await api.addGoods(store_id,item.goods.id)
	loading.value = false;
	getData()
	if (error === 0) {
		ElMessageBox.confirm('商品已铺货，您可到铺货记录查看进度', '铺货成功', {
			type: 'success',
			confirmButtonText: '去铺货记录',
			cancelButtonText: '继续铺货',
		}).then(() => {
			emit('modalCallBack',{
				type:'log'
			})
		}).catch(() => {
			console.log('取消');
		});
	} 

}
function toDetails(item){
useModal(
	details,
	{
		title: '货源推荐',
		id: item?.goods.id,
	},
	{
		confirm: () => {
			getData();
		},
		close: () => {
			getData();
		},
	},
	true
);
}


async function getData(page) {
	loading.value = true
	let {data ,error} = await api.collect.list({
		page: state.pageData.page,
		list_rows: state.pageData.list_rows,
	})
	if(	error === 0){
		loading.value = false
		state.list = data.data
		state.pageData.page = data.page
		state.pageData.total = data.total
		state.pageData.list_rows = data.per_page
	}

}
</script>

<style lang="scss" scoped>


</style>
